<template>
  <div>
    <a-row>
      <a-col :span="24">
        <a-card>
          <a-row>
            <a-col :span="8">
              <a-statistic title="总阅读量" :value="statistic.view_count">
                <template #suffix>
                  <UserOutlined />
                </template>
              </a-statistic>
            </a-col>
            <a-col :span="8">
              <a-statistic title="总点赞量" :value="statistic.vote_count">
                <template #suffix>
                  <like-outlined />
                </template>
              </a-statistic>
            </a-col>
            <a-col :span="8">
              <a-statistic
                title="点赞率"
                :value="(statistic.vote_count / statistic.view_count) * 100"
                :precision="2"
                suffix="%"
                :value-style="{ color: '#cf1322' }"
              >
                <template #suffix>
                  <like-outlined />
                </template>
              </a-statistic>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
    </a-row>
    <br />
    <a-row :gutter="16">
      <a-col :span="12">
        <a-card>
          <a-row>
            <a-col :span="12">
              <a-statistic
                title="今日阅读"
                :value="statistic.todayViewCount"
                style="margin-right: 50px"
              >
                <template #suffix>
                  <UserOutlined />
                </template>
              </a-statistic>
            </a-col>
            <a-col :span="12">
              <a-statistic title="今日点赞" :value="statistic.todayVoteCount">
                <template #suffix>
                  <like-outlined />
                </template>
              </a-statistic>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card>
          <a-row>
            <a-col :span="12">
              <a-statistic
                title="预计今日阅读"
                :value="statistic.todayViewIncrease"
                :value-style="{ color: '#0000ff' }"
              >
                <template #suffix>
                  <UserOutlined />
                </template>
              </a-statistic>
            </a-col>
            <a-col :span="12">
              <a-statistic
                title="预计今日阅读增长"
                :value="statistic.todayViewIncreaseRateAbs"
                :precision="2"
                suffix="%"
                class="demo-class"
                :value-style="
                  statistic.todayViewIncreaseRate < 0
                    ? { color: '#3f8600' }
                    : { color: '#cf1322' }
                "
              >
                <template #prefix>
                  <arrow-down-outlined
                    v-if="statistic.todayViewIncreaseRate < 0"
                  />
                  <arrow-up-outlined
                    v-if="statistic.todayViewIncreaseRate >= 0"
                  />
                </template>
              </a-statistic>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
    </a-row>

    <div id="main"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { getStatistic, get30Statistic } from "@/api/snapshot";
import * as echarts from "echarts";
import { GridComponent } from "echarts/components";
import { LineChart } from "echarts/charts";
import { UniversalTransition } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";
type EChartsOption = echarts.EChartsOption;
echarts.use([GridComponent, LineChart, CanvasRenderer, UniversalTransition]);

// let echarts: any;
const statistic = ref();
statistic.value = {};
const initStatistic = () => {
  getStatistic().then((res) => {
    if (res.data.code === 10001) {
      const statisticResp = res.data.data;
      statistic.value.view_count = statisticResp[1].view_count;
      statistic.value.vote_count = statisticResp[1].vote_count;
      statistic.value.todayViewCount = statisticResp[1].view_increase;
      statistic.value.todayVoteCount = statisticResp[1].vote_increase;

      // 按分钟计算当前时间点，占一天的百分比
      const now = new Date();
      const nowRate = (now.getHours() * 60 + now.getMinutes()) / (60 * 24);
      // console.log(nowRate)
      statistic.value.todayViewIncrease = parseInt(
        String(statisticResp[1].view_increase / nowRate)
      );
      // todayViewIncreaseRate：今日预计增长率
      statistic.value.todayViewIncreaseRate =
        ((statistic.value.todayViewIncrease - statisticResp[0].view_increase) /
          statisticResp[0].view_increase) *
        100;
      statistic.value.todayViewIncreaseRateAbs = Math.abs(
        statistic.value.todayViewIncreaseRate
      );
    }
  });
};
// 初始化echart
const initEchaet = (list: any) => {
  const xAxis: any = [];
  const seriesView: any = [];
  const seriesVote: any = [];
  for (let i = 0; i < list.length; i++) {
    const record = list[i];
    xAxis.push(record.date);
    seriesView.push(record.view_increase);
    seriesVote.push(record.vote_increase);
  }

  var chartDom = document.getElementById("main")!;
  var myChart = echarts.init(chartDom);
  var option: EChartsOption = {
    title: {
      text: "30天趋势图",
    },
    tooltip: {
      trigger: "axis",
    },
    grid: {
      left: "1%",
      right: "5%",
      containLabel: true,
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: xAxis,
    },
    yAxis: {
      // 根据series中的数据来确定y轴数据 大小
      type: "value",
    },
    legend: {
      data: ["总阅读量", "总点赞量"],
    },
    series: [
      {
        name: "总阅读量",
        type: "line",
        data: seriesView,
        smooth: true,
      },
      {
        name: "总点赞量",
        type: "line",
        data: seriesVote,
        smooth: true,
      },
    ],
  };
  option && myChart.setOption(option);

  window.addEventListener("resize", () => {
    myChart.resize();
  });
};
// 获取数据
const get30DayStatistic = () => {
  get30Statistic().then((res) => {
    // console.log(res);
    if (res.data.code === 10001) {
      const statisticList = res.data.data;
      initEchaet(statisticList);
    }
  });
};

onMounted(() => {
  initStatistic();
  get30DayStatistic();
});
</script>

<style scope>
.tip {
  padding: 10px 5px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  background: linear-gradient(white, white) padding-box,
    repeating-linear-gradient(-45deg, black 0, black 25%, white 0, white 50%) 0/0.6em
      0.6em;
  animation: ants 12s linear infinite;
}
.tip b {
  color: red;
}
#main {
  margin-top: 25px;
  width: 100%;
  height: 48vh;
  min-height: 400px;
}
</style>
